<template>
	<view class="collaboration">
		<!-- 合作模块列表 -->
		<view class="module-list">
			<!-- 轮播图 -->
			<view class="swiper-container">
				<view class="swiper-header">
					<text class="title">合作专区</text>
				</view>
				<swiper class="swiper" circular autoplay interval="5000" duration="500" indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3C77FF">
					<swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item" @tap="handleBannerTap(item)">
						<image :src="item.imageUrl" mode="aspectFill" class="swiper-image"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 技师合作 -->
			<view class="module-item gradient-1" @tap="navigateTo('technician')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/collaborate/01.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">技师合作</text>
					<text class="module-desc">加入我们，成为专业技师</text>
				</view>
			</view>
			
			<!-- 老带新福利 -->
			<view class="module-item gradient-3" @tap="navigateTo('referral')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/collaborate/03.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">老带新福利</text>
					<text class="module-desc">邀请好友，共享优惠</text>
				</view>
			</view>
			
			<!-- 加盟合作 -->
			<view class="module-item gradient-2" @tap="navigateTo('franchise')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/icons/握手.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">加盟合作</text>
					<text class="module-desc">开店创业，共创未来</text>
				</view>
			</view>
			
			<!-- 协助选址 -->
			<view class="module-item location-help-btn" @tap="navigateTo('locationHelp')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/icons/选址.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">协助选址</text>
					<text class="module-desc">推荐好位置，共享好收益</text>
				</view>
			</view>
			
			<!-- 有奖征集 -->
			<!-- <view class="module-item gradient-3" @tap="navigateTo('reward')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/collaborate/03.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">有奖征集</text>
					<text class="module-desc">参与活动，赢取奖励</text>
				</view>
			</view> -->
			
			<!-- 推广赚钱 -->
			<!-- <view class="module-item gradient-4" @tap="navigateTo('promotion')">
				<view class="shine"></view>
				<image class="module-icon" src="/static/collaborate/04.png" mode="aspectFit"></image>
				<view class="module-info">
					<text class="module-title">推广赚钱</text>
					<text class="module-desc">分享推广，轻松赚钱</text>
				</view>
			</view> -->
		</view>
		
		
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			bannerList: [],
			linkUrl: []
		}
	},
	onShow() {
		// 加载轮播图数据
		this.loadBannerData()
	},
	methods: {
		// 获取轮播图数据
		async loadBannerData() {
			try {
				const token = uni.getStorageSync('token')
				
				const res = await new Promise((resolve, reject) => {
					uni.request({
						url: `${uni.$config.baseUrl}/techBanner/techBanner/listAll`,
						method: 'GET',
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						data: {
							status: 1 // 只获取启用状态的轮播图
						},
						success: (response) => {
							resolve(response);
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
				
				console.log('轮播图数据响应:', res)
				const response = res.data
				
				if (response.code === 200) {
					// 转换数据格式
					this.bannerList = (response.rows || []).map(item => ({
						id: item.id,
						imageUrl: item.imageUrl,
						linkUrl: item.linkUrl || '',
						title: item.title
					}));
				} else {
					console.error('获取轮播图失败:', response.msg)
				}
			} catch (err) {
				console.error('获取轮播图异常:', err)
			}
		},
		
		handleBannerTap(item) {
			console.log('合作轮播图点击事件')
			console.log(item.linkUrl)
			if (item.linkUrl) {
				// uni.navigateTo({
				// 	url: item.linkUrl
				// })
				// 链接跳转
				location.href = item.linkUrl
			} 
			// 无跳转链接不进行提示操作
			// else {
			// 	uni.showToast({
			// 		title: item.title,
			// 		icon: 'none'
			// 	})
			// }
		},
		
		navigateTo(type) {
			const routes = {
				technician: '/pages/technician-apply/technician-apply',
				// technician: '/pages/face-valid/face-valid',
				franchise: '/pages/collaboration/franchise',
				reward: '/pages/collaboration/reward',
				promotion: '/pages/collaboration/promotion',
				referral: '/pages/collaboration/referral',
				locationHelp: '/pages/collaboration/location-help'
			}
			
			if (routes[type]) {
				uni.navigateTo({
					url: routes[type],
					fail: (err) => {
						console.error('Navigation failed:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
}
</script>

<style lang="scss">
.collaboration {
	min-height: 100vh;
	background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	
	.module-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		padding: 10rpx 0;
		overflow: hidden;
		
		.swiper-container {
			margin: 0;
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 24rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
			backdrop-filter: blur(10px);
			overflow: hidden;
			position: relative;
			transition: all 0.3s ease;
			
			.swiper-header {
				margin-bottom: 20rpx;
				position: relative;
				
				.title {
					font-size: 48rpx;
					font-weight: 700;
					color: #2B87FF;
					position: relative;
					display: inline-block;
					text-shadow: 0 2rpx 4rpx rgba(43, 135, 255, 0.1);
					
					&::after {
						content: '';
						position: absolute;
						bottom: -8rpx;
						left: 0;
						width: 80rpx;
						height: 6rpx;
						background: linear-gradient(90deg, #2B87FF, #3C77FF);
						border-radius: 3rpx;
						box-shadow: 0 2rpx 4rpx rgba(43, 135, 255, 0.2);
					}
				}
			}
			
			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);
			}
			
			.swiper {
				height: 360rpx;
				width: 100%;
			}
			
			.swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				.swiper-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 16rpx;
					transition: all 0.3s ease;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
					
					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
					}
				}
			}
		}
		
		.module-item {
			height: 200rpx;
			padding: 30rpx;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;
			backdrop-filter: blur(10px);
			
			// 渐变背景
			&.gradient-1 {
				background: linear-gradient(135deg, #E8F5FF 0%, #C6E4FF 100%);
				border: 1px solid rgba(198, 228, 255, 0.3);
			}
			
			&.gradient-2 {
				background: linear-gradient(135deg, #FFF3E8 0%, #FFE4C6 100%);
				border: 1px solid rgba(255, 228, 198, 0.3);
			}
			
			&.gradient-3 {
				background: linear-gradient(135deg, #E8FFF3 0%, #C6FFE4 100%);
				border: 1px solid rgba(198, 255, 228, 0.3);
			}
			
			&.gradient-4 {
				background: linear-gradient(135deg, #F3E8FF 0%, #E4C6FF 100%);
				border: 1px solid rgba(228, 198, 255, 0.3);
			}
			
			&.gradient-5 {
				background: linear-gradient(135deg, #FFF9E6 0%, #FFE8B3 100%);
				border: 1px solid rgba(255, 232, 179, 0.3);
			}
			
			// 光纹动画
			.shine {
				position: absolute;
				top: 0;
				left: -150%;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					to right,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 0.4) 50%,
					rgba(255, 255, 255, 0) 100%
				);
				transform: skewX(-25deg);
				animation: shine 3s infinite;
			}
			
			.icon-wrapper {
				width: 140rpx;
				height: 140rpx;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 80rpx;
					color: #2B87FF;
				}
				
				.icon-house:before {
					content: "\e6b8";  // 使用房子图标的 unicode
				}
			}
			
			.module-icon {
				width: 140rpx;
				height: 140rpx;
				margin-right: 30rpx;
				filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
				transition: transform 0.3s ease;
			}
			
			.module-info {
				flex: 1;
				
				.module-title {
					font-size: 40rpx;
					color: #2B87FF;
					font-weight: 700;
					margin-bottom: 16rpx;
					display: block;
					text-shadow: 0 2rpx 4rpx rgba(43, 135, 255, 0.1);
				}
				
				.module-desc {
					font-size: 28rpx;
					color: rgba(43, 135, 255, 0.8);
					display: block;
					line-height: 1.4;
				}
			}
			
			&:active {
				transform: scale(0.98) translateY(2rpx);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
				
				.module-icon {
					transform: scale(1.05);
				}
			}
		}
		
		.location-help-btn {
			background-color: #FFFBE6;  /* 浅黄色背景 */
			border: 1px solid rgba(255, 251, 230, 0.3);
			box-shadow: 0 8rpx 24rpx rgba(255, 251, 230, 0.3);
		}
	}
}

@keyframes shine {
	0% {
		left: -150%;
	}
	20% {
		left: -150%;
	}
	100% {
		left: 150%;
	}
}
</style> 